<template>
    <div class="hello">
        <!-- 第1行 -->
        <div class="row row2">
            <div class="grid width50">
                <div class="contain">
                    <div class="width100 height50 flex top">
                        <div class="width50 height items">
                            <ul class="flex center">
                                <li>
                                    <dl>
                                        <dt>商标</dt>
                                        <dd>6357</dd>
                                    </dl>
                                </li>
                                <li>
                                    <div id="cityPie1" class="chartsCube"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="width50 height">
                            <div id="linebar1" class="chartsCube"></div>
                        </div>
                    </div>
                    <div class="width100 height50 flex bottom">
                        <div class="width50 height items">
                            <ul class="flex center">
                                <li>
                                    <dl>
                                        <dt>软件著作权</dt>
                                        <dd>6357</dd>
                                    </dl>
                                </li>
                                <li>
                                    <div id="cityPie2" class="chartsCube"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="width50 height">
                            <div id="linebar2" class="chartsCube"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid width50">
                <div class="contain">
                    <div class="width100 height50 flex top">
                        <div class="width50 height items">
                            <ul class="flex center">
                                <li>
                                    <dl>
                                        <dt>专利</dt>
                                        <dd>6357</dd>
                                    </dl>
                                </li>
                                <li>
                                    <div id="cityPie3" class="chartsCube"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="width50 height">
                            <div class="width height">
                                <div id="linebar3" class="chartsCube"></div>
                            </div>
                        </div>
                    </div>
                    <div class="width100 height50 flex bottom">
                        <div class="width50 height items">
                            <ul class="flex center">
                                <li>
                                    <dl>
                                        <dt>作品著作权</dt>
                                        <dd>7618</dd>
                                    </dl>
                                </li>
                                <li>
                                    <div id="cityPie4" class="chartsCube"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="width50 height">
                            <div class="width height">
                                <div id="linebar4" class="chartsCube"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第一行 -->
        <div class="row row1">
            <div class="grid width50">
                <div class="tab-title">
                    <!-- <a class="current">商标类型分布</a>
					<a>专利类型分布</a>
					<a>软件著作权类型分布</a>
                    <a>作品著作权类型分布</a>-->
                    <a
                        v-for="(item,index) in tabs"
                        :class="{current:index == num}"
                        @click="tab(index)"
                        :key="index"
                    >{{ item }}</a>
                </div>
                <div class="grid-body">
                    <div class="scroll-div">
                        <ul>
                            <li v-for="(tab, index) in tabs" v-show=" num == index" :key="index">
                                <div id="drawTab" class="chartsCube"></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="grid width50">
                <div class="grid-title">园区产值贡献前五企业</div>
                <div class="grid-body">
                    <div class="company-val">
                        <ul class="colorfff">
                            <li class="width65 999">企业名称</li>
                            <li class="width35 999">创新能力得分</li>
                        </ul>
                        <div
                            class="colorfff"
                            v-for="(company, key, index) in companyname"
                            :key="key"
                            :index="index"
                        >
                            <!--  {{ company }} -->
                            <ul class="company-item" v-for="(text,index) in company" :key="index">
                                <li>{{ index }}</li>
                                <li>{{ text.affiliationTrades }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import { mapState } from 'vuex'
export default {
    data() {
        return {
            tabs: ["商标类型分布", "专利类型分布", "软件著作权类型分布", "作品著作权类型分布"],
            num: 0,
            activeIndex: 0,
        }
    },
    computed: {
        ...mapState({
            companyname: state => state.companyName.companyname.result,
        })
    },
    created: function () {
        this.tabChange()
    },
    mounted: function () {
        this.drawPie('cityPie1'); // yuan
        this.drawBarLine('linebar1');
        this.drawPie('cityPie2'); // yuan
        this.drawBarLine('linebar2');
        this.drawPie('cityPie3'); // yuan
        this.drawBarLine('linebar3');
        this.drawPie('cityPie4'); // yuan
        this.drawBarLine('linebar4');
        this.drawTab('drawTab')
    },
    methods: {
        tabChange() {
            setInterval(() => {
                this.num++;
                if (this.num == 4) {
                    this.num = 0;
                }
            }, 5000);
         
        },
        tab(index) { //轮播
            this.num = index;
        },
        getDom() {
        },
        drawTab(id) {
            let getid = document.getElementById(id)
            let myChart = echarts.init(getid);
            let option = {
                 color: ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', '#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', ],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [{
                        value: 335,
                        name: '直接访问'
                    }, {
                        value: 310,
                        name: '邮件营销'
                    }, {
                        value: 234,
                        name: '联盟广告'
                    }, {
                        value: 135,
                        name: '视频广告'
                    }, {
                        value: 1548,
                        name: '搜索引擎'
                    }],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option);
            window.onresize = function () { myChart.resize(); }
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        drawBarLine(id) {
            let getid = document.getElementById(id)
            let myChart = echarts.init(getid);
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '20%',
                    left: '10%',
                    right: '10%',
                    bottom: '10%',
                    containLabel: true
                },
                legend: {
                    data: ['蒸发量', '降水量', '平均温度'],
                    textStyle: { //图例文字的样式
                        color: '#999',
                        fontSize: 12
                    },
                    icon: ['pin'] //legend图标
                },
                xAxis: [{
                    type: 'category',
                    data: ['1月', '2月'],
                    axisLine: {
                        lineStyle: { //x轴颜色
                            color: '#999',
                            width: 1, //这里是为了突出显示加上的
                        }
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: '#999'
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        formatter: '{value} ml',
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: '#999'
                        },
                    },
                    axisLine: {
                        lineStyle: { //x轴颜色
                            color: '#999',
                            width: 1, //这里是为了突出显示加上的
                        }
                    },
                }, {
                    type: 'value',
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        formatter: '{value} °C',
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                    axisLine: {
                        lineStyle: { //x轴颜色
                            color: '#999',
                            width: 1, //这里是为了突出显示加上的
                        }
                    },
                }],
                series: [{
                    name: '蒸发量',
                    type: 'bar',
                    barWidth: 30, //柱图宽度
                    data: [2.0, 4.9],
                    itemStyle: {
                        normal: {
                            color: '#6f7ffa' //紫色
                        }
                    },
                }, {
                    name: '降水量',
                    type: 'line',
                    data: [2.6, 5.9],
                    itemStyle: {
                        normal: {
                            color: '#de467f' //红色
                        }
                    },
                }, {
                    name: '平均温度',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.0, 2.2],
                    itemStyle: {
                        normal: {
                            color: '#2a75ff'
                        }
                    },
                }]
            };
            myChart.setOption(option);
            window.onresize = function () { myChart.resize(); }
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        drawPie(id) {
            let getid = document.getElementById(id)
            let myChart = echarts.init(getid);
            let option = {
                
                
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [{
                    name: '饼图二',
                    type: 'pie',
                    radius: ['55%', '60%'],
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: 20,
                        name: '占有率',
                        label: {
                            normal: {
                                formatter: '{d} %',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 24
                                }
                            }
                        }
                    }, {
                        value: 80,
                        name: '占位',
                        label: {
                            normal: {
                                formatter: '\n占本市比例',
                                textStyle: {
                                    color: '#999',
                                    fontSize: 14
                                }
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: '#111'
                            },
                            emphasis: {
                                color: '#111'
                            }
                        },
                        hoverAnimation: false
                    }]
                }]
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.scroll-div {
  width: 100%;
  height: 100%;
  ul,
  li {
    width: 100%;
    height: 100%;
  }
}
.tab-title {
  display: flex;
  a {
    display: block;
    flex: 1;
    color: #999;
    height: 2.6rem;
    line-height: 2.6rem;
    text-align: center;
    cursor: pointer;
    outline-style: none;
    -ms-flex: 1;
    flex: 1;
    color: #999;
    font-size: 1.2rem;
    &.current {
      border-bottom: 2px solid #7873f9;
    }
  }
}
.items {
  border-right: 1px solid #3a3a3a;
  li {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.chartsCube {
  width: 100%;
  height: 100%;
}
.items {
  dt {
    font-size: 1.1rem;
    color: #898989;
  }
  dd {
    color: #fff;
    font-size: 3rem;
  }
}
.company-val {
  padding: 30px;
  ul {
    li {
      float: left;
      list-style: none;
      line-height: 4;
      &:first-child {
        width: 60%;
      }
      &:nth-child(2) {
        width: 40%;
      }
    }
  }
}
</style>